<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
{% include "include_stylesheets.html" %}
{% include "include_javascripts.html" %}


	
	
<title>{% block title %}I Love these songs!{% endblock %}</title>
<script type="text/javascript">
WebFont.load({
	  google: {
	    families: ['Nobile']
	  }
	});
</script>
<style type="text/css">

</style>
<script>
  $(document).ready(function() {
    $("#tabs").tabs();
    $("#cmdSearch").button();
    $("#txtSearch").autocomplete({
        source: function( request, response ) {
          return ilts.autocompleteSearch(request, response);
        },
        minLength: 2
      });
		
  });
  </script>
  
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-20260866-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</head>

<body>
<div id="container" class="container container_12">
  <div  class="grid_12 header rowwide">{% block header %}
    I 
    <img src="assets/icons/heart_full.png" border="0" align="absmiddle" alt="Love">
     these
    <img src="assets/icons/audio_notification.png" border="0" align="absmiddle" alt="Song" >s
    {% endblock %}
  </div>
  <div class='clear'>&nbsp;</div>
  
  <div id="login_box" class="grid_12 login rowwide">
  <div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: '106016566126909', status: true, cookie: true,
             xfbml: true});
    FB.Event.subscribe('auth.login', function(response) {
      // do something with response
      login();
    });
    FB.Event.subscribe('auth.logout', function(response) {
      // do something with response
      logout();
    });
    FB.getLoginStatus(function(response) {
      if (response.session) {
        login();
        // logged in and connected user, someone you know
      } else {
        logout();
        // no user session available, someone you dont know
      }
    });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
  
  FB.login(function(response) {
    if (response.session) {
      if (response.perms) {
        // user is logged in and granted some permissions.
        // perms is a comma separated list of granted permissions
        $('#facebook_login_status').html('ok you are logged in and granted permission')
      } else {
        // user is logged in, but did not grant any permissions
        $('#facebook_login_status').html('ok you are logged with NO permission')
      }
    } else {
      // user is not logged in
        $('#facebook_login_status').html('Log in to enable application')
    }
  $('#facebook_login_status').html("ok")
  }, {perms:'read_stream,publish_stream,user_likes'});


  function login(){
    FB.api('/me', function(response) {
      //document.getElementById('login').style.display = "block";
      //dobbiamo fare il redirect
      //window.location.href = "<?php echo url_for("@rfid_setup", true)?>";
      $('#facebook_login_status').html("Ciao, "+response.name+"!<br />")
    });
  }
  function logout(){
    $('#facebook_login_status').html("Effettua la connessione a Facebook!")
  }
</script>
<div id="facebook_login_status">
    Log in to enable application
    </div>
<fb:login-button autologoutlink="true" ></fb:login-button>
  {% block login %}{% endblock %}
  </div>
  <div id="sidebar" class="grid_4">
    <div id="videoPlayer">
    {% include "blocks/howtouse.phtml" %}
    </div>
    <div id="videoInfo">Cerca un video e poi clicca sull'icona
    <img src="assets/icons/audio_notification.png" width="32" border="0" ></img>
    relativa al video per ascoltarlo 
    </div>
    {% block sidebar %}
    
    {% endblock %}
  </div>

  <div id="main" class="grid_8">{% block content %}{% endblock %}</div>
  <div id="footer" class="grid_12 footer rowwide">{% block footer %}{% endblock %}</div>
  
</div>
</body>
</html>